<script setup lang='ts'>
import type { IGetPointTaskRecord } from '@fl/api/anjutong/model/memberpoints-model'
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table'

import { dictList, getPointTaskRecord, getTaskSelect } from '@fl/api/anjutong'

import { formatTime } from './helper'

type RowVO = {
    createTime: string
    id: string
    realName: string
    recordAmount: string
    source: string
    taskName: string
    taskType: string
}

const xGrid = ref<VxeGridInstance<RowVO>>()
const state = ref({
    expiredate: [],
    source: '',
    taskId: '',
    taskType: '',
})
const taskSelectList = ref([])
async function getTaskSelectList() {
    try {
        taskSelectList.value = await getTaskSelect()
    }
    catch (error) {
        taskSelectList.value = []
    }
}
const columns: PlusColumn[] = [

    {
        colProps: {
            span: 8,
        },
        label: '任务类型',
        options: computed(() => {
            return taskSelectList.value
        }),
        prop: 'taskType',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '任务名称',
        options: computed(() => {
            if (state.value.taskType) {
                const params: any = taskSelectList.value.find((item: any) => item.value === state.value.taskType)
                return params?.children ?? []
            }

            return []
        }),
        prop: 'taskId',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '端口',
        options: async () => {
            const data = await dictList({ dictType: 'channel_source' })
            return data
        },
        prop: 'source',
        valueType: 'select',
    },
    {
        colProps: {
            span: 10,
        },
        fieldProps: {
            endPlaceholder: '结束日期',
            format: 'YYYY-MM-DD',
            startPlaceholder: '开始日期',
            type: 'daterange',
        },
        label: '到期时间',
        prop: 'expiredate',
        valueType: 'date-picker',
    },
]
watch(() => state.value.taskType, () => {
    state.value.taskId = ''
}, { deep: true })
const gridOptions = reactive<VxeGridProps<RowVO>>({
    align: 'center',
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'id', title: '获取ID' },
        { field: 'taskType', title: '任务类型' },
        { field: 'taskName', title: '任务名称' },
        { field: 'realName', title: '会员名称' },
        { field: 'source', title: '获取端口' },
        { field: 'createTime', title: '获取时间' },
        { field: 'recordAmount', title: '获取积分' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 400,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})

async function findList() {
    gridOptions.loading = true
    try {
        // getPointTaskRecord
        const options: IGetPointTaskRecord = {
            createTimeEnd: formatTime(state.value.expiredate?.[1], 'YYYY-MM-DD 23:59:59'),
            createTimeStart: formatTime(state.value.expiredate?.[0], 'YYYY-MM-DD 00:00:00'),
            pageIndex: gridOptions.pagerConfig?.currentPage,
            pageSize: gridOptions.pagerConfig?.pageSize,
            source: state.value.source,
            taskId: state.value.taskId,
            taskType: state.value.taskType,
        }
        const data = await getPointTaskRecord(options)
        if (gridOptions.pagerConfig)
            gridOptions.pagerConfig.total = data.total
        gridOptions.data = data.records
        gridOptions.loading = false
    }
    catch (error) {
        gridOptions.loading = false
    }
}

const gridEvents: VxeGridListeners<RowVO> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        findList()
    },
}

onMounted(() => {
    getTaskSelectList()
    findList()
})
function search() {
    if (gridOptions.pagerConfig)
        gridOptions.pagerConfig.currentPage = 1
    findList()
}
</script>

<template>
    <div class="mb-30 bg-white p-30">
        <PlusForm v-model="state"
                  :columns="columns"
                  :row-props="{ gutter: 20 }"
        >
            <template #footer>
                <div class="ml-auto">
                    <el-button type="primary"
                               @click="search"
                    >
                        查询
                    </el-button>
                </div>
            </template>
        </PlusForm>
    </div>

    <div class="bg-white p-30">
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
                  v-on="gridEvents"
        />
    </div>
</template>
